<template>
	<view class="page">
		<!-- 搜索栏 -->
		<view class="search-box">
			<up-search placeholder="输入套系名称搜索" v-model="keyword" :show-action="false" :clearabled="true" @search="getTemplates" @clear="getTemplates"></up-search>
		</view>
		<!-- 内容列表 -->
		<scroll-view class="content-list" scroll-y>
		  <view class="grid-container" v-if="templates.list.length">
			<view v-for="(item, index) in templates.list" :key="index" class="grid-item" @click="clickPhoto(item)">
			  <view class="photo-card">
				<image class="photo" :src="item.coverUrl" mode="aspectFill" />
				<view class="info">
				  <text class="title">{{ item.name }}</text>
				  <view class="location">
					<text class="location-text">归属：{{ getOwnTypeName(item.ownType) }}</text>
				  </view>
				  <view class="bottom-info">
					<text class="price">¥{{ item.price / 100 }}</text>
					<view class="views">
					  <uni-icons type="eye" size="12" color="#999999" />
					  <text class="views-count">{{ item.usedNum }}人看过</text>
					</view>
				  </view>
				</view>
			  </view>
			</view>
			<up-loadmore status="nomore" nomore-text="没有更多了" fontSize="12" color="#909399" />
		  </view>
		  <up-empty mode="data" iconColor="#EBEEF5" marginTop="100" v-else></up-empty>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

// 搜索栏
const keyword = ref(null);
 
// 筛选条件选项
const filterData = reactive({
	// 归属地
	ownTypes: []
})

onMounted(() => {
	getTemplates()
})

// 获取套系列表
const templates = reactive({
	list: []
})
function getTemplates() {
	uni.request({
	    url: `${getApp().globalData.baseUrl}/prod-api/system/photos`,
		method: 'GET',
	    data: {
	        pageNum: 1,
			pageSize: 100,
			name: keyword.value
	    },
	    success: (res) => {
			if (res.data.code === 200) {
				templates.list = res.data.rows
			}
	    },
		fail: (error) => {
	        console.log(error);
		}
	});
}

// 获取归属地名称
function getOwnTypeName(ownType) {
	const arr = filterData.ownTypes.filter(item => item.dictValue === ownType)
	return arr.length ? arr[0].dictLabel : ''
}

// 获取字典-归属地
function getDictOwnType() {
	uni.request({
	    url: `${getApp().globalData.baseUrl}/prod-api/system/dict/data/list`,
		data: {
			dictType: 'template_own_type',
			status: 0,
			pageNum: 1,
			pageSize: 9999
		},
		method: 'GET',
	    success: (res) => {
			if (res.data.code === 200) {
				filterData.ownTypes = res.data.rows
			}
	    },
		fail: (error) => {
	        console.log(error);
		}
	});
}

// 点击查看详情
function clickPhoto(item) {
	uni.navigateTo({
		url: `/pages/detail/detail?uuid=${item.uuid}`
	})
}

</script>

<style lang="scss" scoped>
	.search-box {
		padding: 20rpx;
	}
	::v-deep .u-row {
		flex-wrap: wrap;
	}
	.slot-content {
		background: #ffffff;
		padding: 20rpx 32rpx;
	
		.select {
			box-sizing: border-box;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #303133;
			float: left;
			background: #f4f4f4;
			border-radius: 24rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			width: 100%;
			text-align: center;
	
			&.active {
				color: #ffffff;
				background: #D19973;
			}
		}
	}
	
	.content-list {
		flex: 1;
		overflow: auto;
		height: calc(100vh - 188rpx);
	
		&.h_auto {
			height: auto;
		}
	}
	
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 40rpx 40rpx;
		gap: 32rpx;
	}
	
	.grid-item {
		width: calc(50% - 18rpx);
	}
	
	.photo-card {
		background-color: #F8F8F8;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.photo {
		width: 100%;
		height: 414rpx;
		display: block;
	}
	
	.info {
		padding: 12rpx 20rpx;
	}
	
	.info .title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.location {
		// margin-top: 4rpx;
	}
	
	.location-text {
		font-size: 24rpx;
		color: #999999;
	}
	
	.bottom-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}
	
	.price {
		font-size: 32rpx;
		color: #D19973;
		font-weight: 500;
	}
	
	.views {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}
	
	.views-count {
		font-size: 24rpx;
		color: #999999;
	}
</style>
